if (!Util) {
    var Util = {};
}
//data: [{name:'Name',id:'123'}];
Util.GroupBox = function(container, data, oConfig, callbacks){
    this.container = container[0] || container;
    this.el;
    this.groups = {};
    this.data = data;
    this.cfg = {
        disable: false,
        width: '100%',
        groupBoxHeight: 100,
        animate: false,
        autoHeight: false,
        expendAll:false
    };
    $.extend(this.cfg, oConfig);
    this.cb = {};
    $.extend(this.cb, callbacks);
    this.currentGroup = null;
    this.selectedIndex = 0;
    this.html = '<div class="rtq-groupbox"></div>';
    this.init();
};
Util.GroupBox.prototype = {
    init: function(){
        var self = this;
        this.el = $(this.html).width(this.cfg.width);
        this.bindData(this.data);
        if (typeof self.cfg.defaultExpand != 'undefined' && self.cfg.defaultExpand != 'all') {
            setTimeout(function(){
                self.expand(self.cfg.defaultExpand);
            }, 0);
        }
        else if(self.cfg.defaultExpand == 'all'){
            setTimeout(function(){
                self.expand();
            }, 0);
       }else{//default expend the first group
           for(var g in this.groups){
               setTimeout(function(){
                    self.groups[g].expand();
               }, 0);
               break;
           }
       }
       this.el.appendTo(this.container);
    },
    bindData: function(dataArray){
        this.data = dataArray;
        for (var i = 0; i < dataArray.length; i++) {
            this.createGroup(dataArray[i]);
        }
    },
    expend:function(id){
        if (typeof id != 'undefined') {
            if (typeof this.groups[id] != 'undefined') {
                this.groups[id].expand();
            }
        }else{
            for (var g in this.groups) {
                this.groups[g].expand();
            }
        }
    },
    dexpand:function(expectid){
        if (typeof expectid != 'undefined') {
            for (var g in this.groups) {
                if (g != expectid) {
                    this.groups[g].dexpand();
                }
            }
        }else{
            for (var g in this.groups) {
                this.groups[g].dexpand();
            }
        }
    },
    createGroup: function(data){
        var self = this;
        var group = {};
        group.groupHeight = this.cfg.groupBoxHeight;
        $.extend(group, data);
        var hg = "";
        if (this.cfg.autoHeight == true) {
            hg = 'auto';
        }
        else {
            hg = this.cfg.groupBoxHeight + 'px';
        }
        group.el = $('<div class="rtq-groupbox-group"><h3 class="rtq-groupbox-group-hd">' + data.name + '</h3><div class="rtq-groupbox-group-bd" style="height:' + hg + '"></div></div>');
        group.hd = group.el.children('.rtq-groupbox-group-hd');
        group.bd = group.el.children('.rtq-groupbox-group-bd');
        group.bdHeight = null;
        group.expand = function(){
            if (self.currentGroup && self.currentGroup != group && !self.cfg.expendAll) {
                self.currentGroup.dexpand();
            }
            group.isShow = true;
            group.el.addClass('rtq-groupbox-group-open');
            self.currentGroup = group;
            if (self.cfg.animate) {
                if (!group.bdHeight) {
                    group.bdHeight = group.bd.height();
                }
                group.bd.css({
                    overflow: 'auto'
                });
                group.bd.height(0).animate({
                    height: self.cfg.autoHeight == true ? group.bdHeight : group.groupHeight
                });
            }
            else {
                group.bd.show();
            }
        };
        group.dexpand = function(){
            group.isShow = false;
            group.el.removeClass('rtq-groupbox-group-open');
            
            if (self.cfg.animate) {
                group.bd.css({
                    overflow: 'hidden'
                });
                group.bd.animate({
                    height: 0
                });
            }
            else {
                group.bd.hide();
            }
        };
        group.hd.click(function(){
            if (group.isShow) {
                group.dexpand();
            }
            else {
                group.expand();
            }
            if(self.cb.onClickHead){
                self.cb.onClickHead(self.groups[data.id]);
            }
        });
        this.groups[data.id] = group;
        this.el.append(group.el);
    },
    getGroup: function(id){
        for (var g in this.groups) {
            if (this.groups[g].id == id) {
                return this.groups[g];
            }
        }
        return null;
    },
    clear: function(){
        if (this.groups) {
            for (var g in this.groups) {
                this.groups[g].hd.unbind("click");
                this.groups[g].hd = this.groups[g].bd = this.groups[g].expand = this.groups[g].dexpand = this.groups[g].data = null;
                this.data = null;
                this.groups[g].el.remove();
                this.groups[g].el = null;
            }
        }
    }
};